<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>首页 - 壹加壹农业服务平台</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" href="images/logo.png">
    <link rel="manifest" href="manifest.json">
    
    <!-- Tailwind CSS -->
    <script src="./js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        'primary-light': '#34d399',
                        secondary: '#06b6d4',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        success: '#10b981',
                        neutral: '#f9fafb',
                        'neutral-dark': '#f3f4f6',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif']
                    },
                    boxShadow: {
                        'soft': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'medium': '0 4px 12px rgba(0, 0, 0, 0.08)',
                        'large': '0 8px 24px rgba(0, 0, 0, 0.12)',
                        'xl': '0 12px 32px rgba(0, 0, 0, 0.16)'
                    }
                }
            }
        }
    </script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="css/all.min.css">
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="./css/common.css">
</head>
<body class="bg-gradient-to-br from-slate-50 via-gray-50 to-neutral">
    <!-- 主容器 -->
    <div class="container-app shadow-2xl">
                <!-- 顶部搜索栏 -->
        <header class="bg-white sticky top-0 z-10 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3">
                <div class="flex items-center gap-3 mb-3">
                    <div class="flex items-center gap-2 flex-1">
                        <div class="w-8 h-8 rounded-xl gradient-primary flex items-center justify-center">
                            <i class="fa fa-leaf text-white text-sm"></i>
                        </div>
                        <div>
                            <h1 class="text-base font-bold text-text-primary leading-tight">壹加壹农业</h1>
                            <p class="text-xs text-text-secondary leading-tight">智慧农业 · 美好生活</p>
                        </div>
                    </div>
                    <button class="relative w-10 h-10 rounded-xl hover:bg-gray-100 flex items-center justify-center transition-colors" onclick="handleMessages()">
                        <i class="fa fa-bell text-text-primary text-lg"></i>
                        <span class="absolute top-2 right-2 w-2 h-2 bg-danger rounded-full"></span>
                        </button>
                </div>
                <div class="relative">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
                    <input type="text" placeholder="搜索服务或需求..." 
                           class="w-full pl-10 pr-4 py-2.5 bg-neutral rounded-xl text-sm border border-gray-200/50 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all shadow-soft">
                </div>
                    </div>
                </header>
                
        <main class="pb-20">
                    <!-- 轮播图 -->
            <section class="px-4 pt-4 pb-2">
                <div class="relative h-44 rounded-3xl overflow-hidden shadow-large">
                    <div class="carousel-item active absolute inset-0 transition-all duration-700 cursor-pointer" onclick="window.location.href='./pages/platform-intro.html'">
                        <img src="images/photo1.jpg" 
                             alt="平台介绍" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
                            <h2 class="text-xl font-bold mb-2">壹加壹农业服务平台</h2>
                            <p class="text-sm text-white/90 mb-3">嘉祥县壹加壹农业种植农民专业合作社</p>
                            <button class="px-5 py-2 bg-white/20 backdrop-blur-md rounded-xl text-sm font-medium hover:bg-white/30 transition-all border border-white/30" onclick="event.stopPropagation(); window.location.href='./pages/platform-intro.html'">
                                了解平台 <i class="fa fa-arrow-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="carousel-item absolute inset-0 opacity-0 transition-all duration-700 cursor-pointer" onclick="window.location.href='./pages/service-center.html'">
                        <img src="images/photo2.jpg" 
                             alt="服务中心" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
                            <h2 class="text-xl font-bold mb-2">服务中心</h2>
                            <p class="text-sm text-white/90 mb-3">全方位农业服务，一站式解决方案</p>
                            <button class="px-5 py-2 bg-white/20 backdrop-blur-md rounded-xl text-sm font-medium hover:bg-white/30 transition-all border border-white/30" onclick="event.stopPropagation(); window.location.href='./pages/service-center.html'">
                                查看服务 <i class="fa fa-arrow-right ml-1"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 轮播指示器 -->
                    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10">
                        <span class="carousel-indicator w-2 h-2 rounded-full bg-white/50 cursor-pointer hover:bg-white/80 transition-all active" data-index="0"></span>
                        <span class="carousel-indicator w-2 h-2 rounded-full bg-white/50 cursor-pointer hover:bg-white/80 transition-all" data-index="1"></span>
                    </div>
                </div>
            </section>
                    
            <!-- 服务中心 -->
            <section class="px-4 py-5">
                <div class="bg-white rounded-2xl p-4 shadow-soft border border-gray-100">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-bold text-text-primary">服务中心</h2>
                        <span class="text-xs text-text-secondary">全部服务</span>
                    </div>
                    <div class="grid grid-cols-4 gap-3" id="service-grid">
                        <!-- 服务项将通过JavaScript动态生成 -->
                    </div>
                </div>
            </section>
                    
            <!-- 快速发布卡片 -->
        <section class="px-4 pb-5">
            <div class="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-2xl p-4 border border-primary/20">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-6 h-6 rounded-lg bg-primary/10 flex items-center justify-center">
                        <i class="fa fa-plus text-primary text-xs"></i>
                    </div>
                    <h3 class="text-sm font-bold text-text-primary">快速发布</h3>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <button class="bg-white p-4 rounded-xl text-left group hover:shadow-medium transition-all border border-gray-100 hover:border-secondary/30" onclick="handlePublishDemand()">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="w-10 h-10 rounded-xl gradient-secondary flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i class="fa fa-list-alt text-white text-lg"></i>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-sm font-bold text-text-primary">发布需求</h3>
                                <p class="text-xs text-text-secondary mt-0.5">快速匹配服务</p>
                            </div>
                        </div>
                    </button>
                    
                    <button class="bg-white p-4 rounded-xl text-left group hover:shadow-medium transition-all border border-gray-100 hover:border-primary/30" onclick="handlePublishService()">
                        <div class="flex items-center gap-3 mb-2">
                            <div class="w-10 h-10 rounded-xl gradient-primary flex items-center justify-center group-hover:scale-110 transition-transform">
                                <i class="fa fa-handshake text-white text-lg"></i>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-sm font-bold text-text-primary">发布服务</h3>
                                <p class="text-xs text-text-secondary mt-0.5">展示服务能力</p>
                            </div>
                        </div>
                    </button>
                </div>
            </div>
        </section>
                    
            <!-- 热门服务 -->
            <section class="px-4 pb-5">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-base font-bold text-text-primary flex items-center">
                        <span class="w-1 h-4 bg-primary rounded-full mr-2"></span>
                        热门服务
                    </h2>
                    <a href="./pages/service.html" class="text-xs text-primary hover:underline">查看更多 →</a>
                        </div>
                <div class="space-y-3" id="hot-services">
                    <!-- 热门服务卡片将通过JavaScript动态生成 -->
                            </div>
            </section>

            <!-- 热门需求 -->
            <section class="px-4 pb-5">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-base font-bold text-text-primary flex items-center">
                        <span class="w-1 h-4 bg-primary rounded-full mr-2"></span>
                        热门需求
                    </h2>
                    <a href="./pages/demand.html" class="text-xs text-primary hover:underline">查看更多 →</a>
                            </div>
                <div class="space-y-3" id="hot-demands">
                    <!-- 热门需求卡片将通过JavaScript动态生成 -->
                        </div>
            </section>

            <!-- 通知公告 - 移至底部 -->
            <section class="px-4 pb-5">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-base font-bold text-text-primary flex items-center">
                        <span class="w-1 h-4 bg-primary rounded-full mr-2"></span>
                        通知公告
                    </h2>
                    <a href="./pages/announcement.html" class="text-xs text-primary">更多 →</a>
                </div>
                <div class="space-y-3">
                    <a href="javascript:void(0)" onclick="navigateToAnnouncement(1)" class="bg-white rounded-2xl shadow-soft border border-gray-100 hover:shadow-medium transition-all block overflow-hidden group">
                        <div class="p-4">
                            <div class="flex gap-3">
                                <div class="w-2 h-2 rounded-full bg-primary mt-1.5 flex-shrink-0"></div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-start justify-between mb-2">
                                        <h3 class="text-sm font-bold text-text-primary group-hover:text-primary transition-colors flex-1 pr-2">2024年农业补贴政策发布</h3>
                                        <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded flex-shrink-0">政策</span>
                                    </div>
                                    <p class="text-xs text-text-secondary mb-2 line-clamp-2">最新农业补贴政策已出台，符合条件的企业可申请...</p>
                                    <div class="flex items-center gap-3 text-xs text-text-secondary">
                                        <span><i class="fa fa-calendar-o mr-1"></i>今天 14:30</span>
                                        <span><i class="fa fa-eye mr-1"></i>1.2k</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    
                    <a href="javascript:void(0)" onclick="navigateToAnnouncement(2)" class="bg-white rounded-2xl shadow-soft border border-gray-100 hover:shadow-medium transition-all block overflow-hidden group">
                        <div class="p-4">
                            <div class="flex gap-3">
                                <div class="w-2 h-2 rounded-full bg-accent mt-1.5 flex-shrink-0"></div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-start justify-between mb-2">
                                        <h3 class="text-sm font-bold text-text-primary group-hover:text-primary transition-colors flex-1 pr-2">新用户注册福利活动</h3>
                                        <span class="text-xs px-2 py-1 bg-accent/10 text-accent rounded flex-shrink-0">活动</span>
                                    </div>
                                    <p class="text-xs text-text-secondary mb-2 line-clamp-2">新用户注册即送服务优惠券，快来领取...</p>
                                    <div class="flex items-center gap-3 text-xs text-text-secondary">
                                        <span><i class="fa fa-calendar-o mr-1"></i>昨天 10:15</span>
                                        <span><i class="fa fa-eye mr-1"></i>856</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </section>
                </main>
        
        <!-- 底部导航栏 -->
        <div id="bottom-nav"></div>

        <!-- 发布弹框容器 -->
        <div id="publish-modal-container"></div>
    </div>

    <!-- JavaScript -->
    <script src="./js/common.js"></script>
    <script src="./js/navigation.js"></script>
    <script src="./js/components.js"></script>
    <script src="./js/animate.js"></script>
    <script src="./js/home.js"></script>
    
    <script>
        // 首页初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化Token
            CommonUtils.initToken();
        });
        
        // 联系我功能（需要登录）
        function handleContactClick(userName, phone) {
            if (CommonUtils.checkLoginRequired(() => {}, '联系我')) {
                Components.showContactModal(userName, phone);
            }
        }
        
        // 发布需求功能（需要商户权限）
        async function handlePublishDemand() {
            const hasPermission = await CommonUtils.checkMerchantRequired(null, '发布需求');
            if (hasPermission) {
                window.location.href = './pages/publish-demand.html';
            }
        }
        
        // 发布服务功能（需要商户权限）
        async function handlePublishService() {
            const hasPermission = await CommonUtils.checkMerchantRequired(null, '发布服务');
            if (hasPermission) {
                window.location.href = './pages/publish-service.html';
            }
        }
        
        // 站内信功能（需要登录）
        function handleMessages() {
            if (CommonUtils.checkLoginRequired(() => {}, '站内信')) {
                window.location.href = './pages/messages.html';
            }
        }
    </script>
</body>
</html>

